<template>
  <div>
    <div class="form_area">
      <div class="form_title">采集任务名称</div>
      <BasicForm @register="registerForm_name" @submit="handleSubmit" />
      <a-divider style="margin: 10px 0" />
      <div class="form_title">采集任务时效</div>
      <BasicForm class="registerForm_timeliness" @register="registerForm_timeliness" @submit="handleSubmit" />
      <a-divider style="margin: 10px 0" />
      <div class="form_title">选择采集范围</div>
      <BasicForm @register="registerForm_scope" @submit="handleSubmit" />
    </div>
    <BasicTable @register="registerTable">
      <template #isExclude="{ record }">
        <a-checkbox v-model:checked="record.exclude" @click="handleCheckboxChange(record)" />
      </template>
    </BasicTable>
    <!--    <RuleModal @register="registerModal" @success="handleSuccess" />-->
    <div class="submit_btn">
      <a-button type="primary" @click="handleCreateTask">创建采集任务</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { h } from 'vue';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { BasicForm, useForm } from '@/components/Form';
  import { useModal } from '@/components/Modal';
  import { getList, deleteRule, saveRule } from './rule.api';
  import RuleModal from './RuleModal.vue';
  import { nameFormSchema, scopeFormSchema, timelinessFormSchema, columns } from './rule.data';

  // 注册表单  --  采集名称
  const [registerForm_name, { getFieldsValue: getNameFormValues }] = useForm({
    schemas: nameFormSchema,
    showSubmitButton: false,
    showResetButton: false,
  });

  //注册表单 -- 采集时效
  const [registerForm_timeliness, { getFieldsValue: getTimelinessFormValues }] = useForm({
    schemas: timelinessFormSchema,
    showSubmitButton: false,
    showResetButton: false,
  });

  //注册表单 -- 采集范围
  const [registerForm_scope, { getFieldsValue: getScopeFormValues }] = useForm({
    schemas: scopeFormSchema,
    showSubmitButton: false,
    showResetButton: false,
  });

  // 获取所有表单数据的方法
  const getAllFormsData = () => {
    const nameData = getNameFormValues();
    const timelinessData = getTimelinessFormValues();
    const scopeData = getScopeFormValues();

    return {
      ...nameData,
      ...timelinessData,
      ...scopeData,
    };
  };

  // 注册表格
  const [registerTable, { reload, getDataSource }] = useTable({
    api: () => {
      return getList({ industry: '1', ruleId: '1353563050407936001' });
    },
    // dataSource: mockData,
    columns: columns,
    bordered: true,
    rowKey: 'id',
    canResize: false,
    useSearchForm: false,
    pagination: false,
    scroll: {
      y: 300,
    },
  });

  // 获取选中项的ID
  const getSelectedIds = () => {
    const dataSource = getDataSource();
    console.log(dataSource);
    return dataSource.filter((item) => item.exclude).map((item) => item.b109);
  };

  // 注册弹窗
  const [registerModal, { openModal }] = useModal();

  // 搜索提交
  async function handleSubmit(values) {
    await reload({ searchInfo: values });
  }

  /**
   * 创建采集任务
   */
  function handleCreateTask() {
    console.log(getNameFormValues());
    console.log(getTimelinessFormValues());
    console.log(getScopeFormValues());
    //TODO 创建采集任务确认事件
    let params = {
      ...getAllFormsData(),
      excludes: getSelectedIds(),
      industryType:1,
      id: '',
      tableShowName:'1',
    };
    console.log(getSelectedIds());
    saveRule(params).then((res) => {
      console.log(res);
    });
  }

  /**
   * 采集范围选择框状态改变
   * @param record
   */
  function handleCheckboxChange(record) {
    record.exclude = !record.exclude;
    console.log('当前记录状态改变:', record);
  }
</script>

<style scoped lang="scss">
  .form_area {
    padding: 12px;
    background: #fff;
    margin: 10px;
  }
  .form_title {
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255);
    display: inline-block;
    padding: 3px 6px;
    background: #1890ff;
    border-radius: 2px;
    margin: 0 0 16px 0;
  }
  .registerForm_timeliness {
    :deep(.ant-row) {
      flex-flow: row;
    }
  }
  .submit_btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
  }
</style>
